<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		　<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=qg9PHYboQU1S8n22m2FS5ajknGmiUDQg"></script>
		<title>地图展示</title>
		<style type="text/css">
			body,
			html,
			#allmap {
				width: 100%;
				height: 100%;
				overflow: hidden;
				margin: 0;
				font-family: "微软雅黑";
			}
	
		</style>
	</head>

	<body>
		<div>

			起始地址：<input type="text" id="startId" size="20" style="width:150px;"  /> 目标地址：
			<input type="text" id="endId" size="20" style="width:150px;" />
			<button id="routeBtn">线路规划</button>
		</div>
		<div id="allmap"></div>

	</body>
	<script type="text/javascript">
		
		new BMap.Autocomplete({"input" : "startId"});
		new BMap.Autocomplete({"input" : "endId"});

		
		// 创建地址解析器实例
		var myGeo = new BMap.Geocoder();

		var startPoint;
		var endPoint;
		// 获得起始坐标
		$('#startId').blur(function() {
			// 将地址解析横、纵 坐标
			myGeo.getPoint($(this).val(), function(point) {
				if(point) {
					startPoint = point;
					console.log("startPoint：" + startPoint);
				} else {
					alert("您选择地址没有解析到结果!");
				}
			}, "中国");

		});

		// 获得结束坐标
		$('#endId').blur(function() {

			myGeo.getPoint($(this).val(), function(point) {
				if(point) {
					endPoint = point;
					console.log("endPoint：" + endPoint);
				} else {
					alert("您选择地址没有解析到结果!");
				}
			}, "中国");
		});
	</script>

	<script>
		// 百度地图API功能
		var map = new BMap.Map("allmap");
        var point = new BMap.Point(117.67795441661283, 39.004371267828304);
        // 创建点坐标
        map.centerAndZoom(point, 25);
        // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom();
        map.addControl(new BMap.NavigationControl());//向地图中添加缩放控件
        var ctrlSca = new window.BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrlSca);//比例尺
        //地图、卫星、混合模式切换
        map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));


		$('#routeBtn').click(function() {
			var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Timor.png", new BMap.Size(32, 70), { //小车图片
				//offset: new BMap.Size(0, -5),    //相当于CSS精灵
				imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
			});
			var driving2 = new BMap.DrivingRoute(map, {
				renderOptions: {
					map: map,
					autoViewport: true
				}
			}); //驾车实例
			driving2.search(startPoint, endPoint); //显示一条公交线路
			
			window.run = function (){
		var driving = new BMap.DrivingRoute(map);    //驾车实例
		driving.search(startPoint, endPoint);
		driving.setSearchCompleteCallback(function(){
			var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
			var paths = pts.length;    //获得有几个点

			var carMk = new BMap.Marker(pts[0],{icon:myIcon});
			map.addOverlay(carMk);
			i=0;
			function resetMkPoint(i){
				carMk.setPosition(pts[i]);
				if(i < paths){
					setTimeout(function(){
						i++;
						resetMkPoint(i);
					},100);
				}
			}
			setTimeout(function(){
				resetMkPoint(5);
			},100)

		});
	}
			setTimeout(function() {
				run();
			}, 1500);
		})

	</script>

</html>